<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
    
    
        <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
</head>

<body>

    <div id="sss" style="width: 100%;overflow:auto">
        <h2>续停订列表</h2>
    <table border="1"  class="table table-striped" style="width:2570px">
        <tr>
            <td>ID</td>
            <td>提名</td>
            <td>订购机制</td>
            <td>年份</td>
            <td>代理公司</td>
            <td>支付金额</td>
            <td>是否到货</td>
            <td>预估金额</td>
            <td>结算金额</td>
            <td>补款金额</td>
            <td>数据库支持</td>
            <td>载体</td>
            <td>订购类型<select  v-on:change="vv($event)" ><option>----------请选择---------</option><option v-for="lo in types">{{lo.orderType}}</option></select></td>
            <td>审核状态</td>
            <td>代理公司户口号ID</td>
            <td>经费支持</td>
            <td>是否顶到</td>

            <td>外币价格</td>
            <td>退款金额</td>
            <td>开通范围</td>
            <td>印本订购方式id</td>
            <td>创建日期</td>
            <td>修改日期</td>
            <td>停续订</td>
        </tr>
        <tr v-for="li in list" >
            <td>{{li.id}}</td>
            <td>{{li.title}}</td>
            <td>{{li.orderOrganization}}</td>
            <td>{{li.orderYear}}</td>
            <td>{{li.agencyCompanyId}}</td>
            <td>{{li.pay}}</td>
            <td>{{li.isArrival}}</td>
            <td>{{li.estimatedAmount}}</td>
            <td>{{li.settlementPrice}}</td>
            <td>{{li.fillingMoney}}</td>
            <td>{{li.databaseSupport}}</td>
            <td>{{li.carrier}}</td>
            <td>{{li.orderType}}</td>
            <td>{{li.reviewStatus}}</td>
            <td>{{li.doorNoId}}</td>
            <td>{{li.financialSupportId}}</td>
            <td>{{li.isOrder}}</td>
            <td>{{li.foreignPrice}}</td>
            <td>{{li.returnPrice}}</td>
            <td>{{li.openRange}}</td>
            <td>{{li.printerMethodId}}</td>
            <td>{{li.createDate}}</td>
            <td>{{li.updateDate}}</td>
            <td><button v-on:click="tingding(li.id,0)">停订</button> | <button v-on:click="tingding(li.id,1)">续订</button></td>
        </tr>
    </table>
</div>
</body>
</html>

<script>
    //var id={{param.id}}
    new Vue({
        el:"#sss",
        created(){      //自动调用
            this.getAllList(null,null);//列表方法
            this.getType();
        },
        data:{          //定义参数
            name:"",
            list:[],
            types:[]
        },    
        methods: {      //定义方法
           
            //select监听
            vv(e){
                alert(e.target.value);
                this.getAllList(null,e.target.value);
            },
            //停续订
            tingding(id,state){
                
                axios.post("http://29n01o8660.oicp.vip/server/Order/updateState/"+id+"/"+state);
                //location.reload();
                //window.reload();
                //router.go(0);
            },
            //列表
            getAllList(year,type){
              var y=new Date();
              alert(y.getFullYear());
              if(year==null | year==""){
                    year=y.getFullYear()
              }
              if(type==null | type==""){
                type="非刊"
              }
            axios.post('http://29n01o8660.oicp.vip/server/Order/xtding/'+year+"/"+type).then(response=>{(this.list=response.data)})
            },
            //下拉回显
            getType(){
                axios.post('http://29n01o8660.oicp.vip/server/Order/getType').then(response=>{(this.types=response.data)})
                console.log(this.types);
            },
             
         }
    });
</script>